<!DOCTYPE html>
<html lang="en">
<head>
#include("/common/content/content.html")
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="#(ctx??)/images/login/1.jpg" class="img-circle" height="30"/>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">登出</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="line-height: 30px">
                    Java<span class="caret"></span>
                </a>

            </li>
        </ul>
    </div>
</div>
<div class="learn-side-menu">
    <div class="learn-side-menu-body">
        <ul class="nav nav-tabs nav-stacked">
            <li>
                <a href="#sysSetting" class="nav-header collapsed" data-toggle="collapse">
                    <i class="glyphicon glyphicon-cog"></i>
                    系统管理
                    <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                </a>
                <ul id="sysSetting" class="nav nav-list collapse secondmenu" >
                    <li class="learn-side-menu-li"><a href="login1.html"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                    <li class="learn-side-menu-li"><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                    <li class="learn-side-menu-li"><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                    <li class="learn-side-menu-li"><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                    <li class="learn-side-menu-li"><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="learn-content">
    <div class="learn-content-nav">
        <button class="learn-content-button-left">
            <i class="glyphicon glyphicon-backward"></i>
        </button>
        <div class="learn-nav">
            <div class="learn-nav-div">
                <a href="javascript:;" class="active mylearn" data-id="login.html" >首页</a>
            </div>
        </div>
        <button class="learn-content-button-right">
            <i class="glyphicon glyphicon-forward"></i>
        </button>
    </div>
    <div class="learn-div-iframe">
        <iframe src="#(ctx??)/"class="learn-iframe" data-id="login.html"></iframe>
    </div>
</div>
<div class="learn-footer">
    @mylearn
</div>
<script>

    function addTab(){
        var obj=$(this).find("a:first");
        var text=$.trim(obj.text()),
            url=obj.attr("href"),
            index=obj.data("index"),
            flag=true;
        if(url==undefined|| $.trim(url).length==0 )return false;
        //循环 .mylearn 集合
        $.each($(".mylearn"),function(){
            //判断集合中的id等于url的元素
            if($(this).data("id")==url){
                //判断当前元素的class不包含active
                if(!$(this).hasClass("active")){
                    //给当前元素添加class=active,移除同胞元素class=active
                    $(this).addClass("active").siblings(".mylearn").removeClass("active");
                    //滚动到对应选项卡
                    //scrollToTab(this);
                    //循环.learn-div-iframe .learn-iframe 集合
                    $.each($(".learn-div-iframe .learn-iframe"),function(){
                        //判断集合中的id等于url的元素
                        if($(this).data("id")==url){
                            //显示当前元素，隐藏同胞元素
                            $(this).show().siblings(".learn-iframe").hide();
                            //终止循环 jquery return false ,javascript break
                            return false;
                        }
                    })
                }
                //终止循环 jquery return false ,javascript break
                flag = false;
                return false;
            }
        });
        //选项卡不存在
        if(flag){
            var tab="<a href='javascript:;' class='active mylearn' data-id='"+url+"'>"+text+"&nbsp;<i class='glyphicon glyphicon-remove-circle'></i></a>";
            //移除选项卡所有active样式
            $(".mylearn").removeClass("active");
            //添加选项卡
            $(".learn-nav-div").append(tab);
            //添加选项卡对应的iframe
            var ifr="<iframe src='"+url+"' class='learn-iframe' name='iframe"+index+"' data-id='"+url+"'></iframe>";
            //隐藏learn-div-iframe元素下的所有iframe.mylearn元素，learn-div-iframe元素拼接ifr
            $(".learn-div-iframe").find("iframe.learn-iframe").hide().parents(".learn-div-iframe").append(ifr);
            //scrollToTab($(".active.mylearn"))
        }
        //终止a标签href
        return false;
    }
    
    //选项卡切换
    function activeTab(){
    	 if(!$(this).hasClass("active")){
             var id=$(this).data("id");
             $(this).siblings().removeClass("active");
             $(this).addClass("active");
             $.each($(".learn-div-iframe .learn-iframe"),function(){
                 if($(this).data("id")==id){
                     $(this).show().siblings().hide();
                 }
             })
         }
    }
    
    // 关闭选项卡菜单
    function delTab() {
    	debugger;
    	$('.learn-div-iframe .learn-iframe');
        var closeTabId = $(this).parents('.mylearn').data('id');
        var currentWidth = $(this).parents('.mylearn').width();
        // 当前元素处于活动状态
        if ($(this).parents('.mylearn').hasClass('active')) {
            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
            if ($(this).parents('.mylearn').next('.mylearn').size()) {
                var activeId = $(this).parents('.mylearn').next('.mylearn:eq(0)').data('id');
                $(this).parents('.mylearn').next('.mylearn:eq(0)').addClass('active');
                $('.learn-div-iframe .learn-iframe').each(function () {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.learn-iframe').hide();
                        return false;
                    }
                });
                var marginLeftVal = parseInt($('.learn-nav-div').css('margin-left'));
                if (marginLeftVal < 0) {
                    $('.learn-nav-div').animate({
                        marginLeft: (marginLeftVal + currentWidth) + 'px'
                    }, "fast");
                }
                //  移除当前选项卡
                $(this).parents('.mylearn').remove();
                // 移除tab对应的内容区
                $('.learn-div-iframe .learn-iframe').each(function () {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }
            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
            if ($(this).parents('.mylearn').prev('.mylearn').size()) {
                var activeId = $(this).parents('.mylearn').prev('.mylearn:last').data('id');
                $(this).parents('.mylearn').prev('.mylearn:last').addClass('active');
                $('.learn-div-iframe .learn-iframe').each(function () {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.learn-iframe').hide();
                        return false;
                    }
                });

                //  移除当前选项卡
                $(this).parents('.mylearn').remove();

                // 移除tab对应的内容区
                $('.learn-div-iframe .learn-iframe').each(function () {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }
        }
        // 当前元素不处于活动状态
        else {
            //  移除当前选项卡
            $(this).parents('.mylearn').remove();

            // 移除相应tab对应的内容区
            $('.learn-div-iframe .learn-iframe').each(function () {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
        }
        return false;
    }
    
    //绑定addTab
    $(".learn-side-menu-li").on("click",addTab);
    //绑定activeTab
    $('.learn-nav-div').on('click', '.mylearn', activeTab);
    //绑定delTab
    $('.learn-nav-div').on('click', '.mylearn i', delTab);

</script>
</body>
</html>